<template>
  <div class="member-card bg-white/80 backdrop-blur-lg rounded-2xl shadow-md overflow-hidden p-6 transition-all duration-300 ease-in-out">
    <div class="flex justify-between items-center mb-5">
      <h2 class="text-xl font-bold text-gray-800 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <span>社区成员</span>
        <span class="inline-flex items-center justify-center px-2 py-1 ml-2 text-xs font-bold leading-none text-blue-100 bg-green-600 rounded-full">
          {{ members.length }}位
        </span>
      </h2>

      <div class="flex items-center space-x-1">
        <button @click="prevPage" :disabled="currentPage === 1" class="pagination-btn">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
        </button>
        <span class="text-sm font-medium text-gray-600 w-8 text-center">{{ currentPage }}/{{ totalPages }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="pagination-btn">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
        </button>
      </div>
    </div>

    <div class="grid grid-cols-3 gap-4">
      <div
        v-for="(member, index) in paginatedMembers"
        v-if="index < 6"
        :key="member.id"
        class="member-grid-item group"
        @click="handleMemberClick(member.id)"
      >
        <!-- 成员头像 -->
        <div class="relative">
          <img
            :src="member.avatar"
            :alt="member.name"
            class="w-16 h-16 rounded-full object-cover border-2 border-white shadow-lg transition-transform duration-300 ease-in-out group-hover:scale-110"
          >
          
          <!-- 社长标识 -->
          <div
            v-if="member.role === '社长'"
            class="absolute -bottom-1 -right-1 bg-yellow-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center shadow-md"
          >
            <i class="fa fa-crown text-[8px]"></i>
          </div>

          <!-- 副社长标识 -->
          <div
            v-if="member.role === '副社长'"
            class="absolute -bottom-1 -right-1 bg-gray-300 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center shadow-md"
          >
            <i class="fa fa-star text-[8px]"></i>
          </div>

          <!-- 管理员标识 -->
          <div
            v-if="member.role === '管理员'"
            class="absolute -bottom-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center shadow-md"
          >
            <i class="fa fa-cog text-[8px]"></i>
          </div>
        </div>

        <!-- 成员信息 -->
        <div class="text-center mt-2">
          <p class="font-semibold text-gray-800 text-sm truncate w-20">
            {{ member.name }}
            <!-- 性别标识 -->
            <i v-if="member.gender === '男'" class="fa fa-mars text-blue-400 ml-1 text-xs"></i>
            <i v-if="member.gender === '女'" class="fa fa-venus text-red-400 ml-1 text-xs"></i>
          </p>
          <p class="text-xs text-gray-500 mt-0.5">
            <i class="fa fa-calendar-check-o mr-1"></i>加入{{ member.joinDays }}天
          </p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { communityMembersData } from "@/mock/communityMembersData.js";

export default {
  name: "CommunityMembers",
  props: {
    communityId: {
      type: [Number, String],
      required: true,
    }
  },
  watch: {
    communityId(newId) {
      // 当 communityId 发生变化时，重新加载数据
      // this.loadCommunityMembers(newId);
    }
  },
  data() {
    return {
      members: communityMembersData,
      currentPage: 1,
      itemsPerPage: 8
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.members.length / this.itemsPerPage);
    },
    paginatedMembers() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.members.slice(start, end);
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString("zh-CN", { year: "numeric", month: "short", day: "numeric" });
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    handleMemberClick(memberId) {
      this.$router.push({
        name: 'user',
        query: {userId: memberId}
      });
    }
  }
};
</script>

<style scoped>
.member-card {
  font-family: 'Inter', sans-serif;
}

/* Grid Item Styling */
.member-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem; /* 12px */
  border-radius: 0.75rem; /* 12px */
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: rgba(249, 250, 251, 0.5); /* Semi-transparent background */
}

.member-grid-item:hover {
  transform: translateY(-4px);
  background-color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 管理员标识样式 */
[class*="bg-blue-500"] {
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4);
}

/* 社长标识样式 */
[class*="bg-yellow-500"] {
  box-shadow: 0 2px 4px rgba(234, 179, 8, 0.4);
}

/* 副社长标识样式 */
[class*="bg-gray-300"] {
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.4);
}

/* Pagination Button Styling */
.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem; /* 28px */
  height: 1.75rem; /* 28px */
  border-radius: 9999px; /* full */
  background-color: rgba(0, 0, 0, 0.05);
  color: #4b5563; /* text-gray-600 */
  transition: all 0.2s ease-in-out;
}

.pagination-btn:not(:disabled):hover {
  background-color: #10b981; /* emerald-500 */
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>